// pages/play/play.js
Page({

  /* 页面的初始数据 */
  data: {
    // 歌曲列表
    musiclist: [],
    // 当前歌曲下标
    nowIndex: "",
    // 歌曲id
    musicid: "",
    // 当前播放歌曲数据
    music: {},
    // 控制播放的方法
    action: {
      "method": "play"
    },
    // 存储时间和歌词
    lrcdata: [],
    // 当前播放歌词下标
    lrcindex: 0,
    // 当前歌词定位
    top: 0,
    // 播放时间的对象
    playtime: "00:00",
    sumtime: "03:00",
    maxtime: 180,  // 整体长度
    valuetime: 0,  // 当前长度
    // 顺序循环 单曲循环  随机
    mode: ["loop", "single", "random"],
    // 模式下标
    modeindex: 0,
    // 当前模式
    modestate: "loop",
    // 播放列表的top值
    listtop:0
  },

  /* 生命周期函数--监听页面加载 */
  onLoad(options) {
    // 获取传过来的歌曲数据
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('acceptDataFromOpenerPage', data => {
      const musiclist = data.data.musiclist
      const nowIndex = data.data.nowIndex
      // 当前播放歌曲
      const music = musiclist[nowIndex]
      // 赋值
      this.setData({
        nowIndex: nowIndex,
        musiclist: musiclist,
        musicid: music.id
      })
    })
    // 调用获取歌曲详情方法
    this.getMusicDetail()
    // 调用获取歌词
    this.getlrc()
  },
  // 歌曲详情：两个页面歌曲结构不一样
  getMusicDetail: function () {
    wx.request({
      url: 'http://localhost:3000/song/detail?ids=' + this.data.musicid,
      success: (result) => {
        this.setData({
          music: result.data.songs[0]
        })
      },
    })
  },
   // 播放控制
  playdate: function () {
    // 获取当前状态
    let date = this.data.action.method
    // 判断当前状态
    if (date === "play") {
      this.setData({
        action: {
          "method": "pause"
        }
      })
    } else {
      this.setData({
        action: {
          "method": "play"
        }
      })
    }
  },
  // 获取歌词
  getlrc: function () {
    wx.request({
      url: 'http://localhost:3000/lyric?id=' + this.data.musicid,
      success: (result) => {
        const lrcstr = result.data.lrc.lyric
        // 整理歌词
        this.setlrcshow(lrcstr)
      },
    })
  },
  // 整理歌词
  /*
  [02:29.36]小小的肩膀
  [02:32.64]也有大担当
  [02:35.55]挫折和创伤
  [02:38.16]会让我 变更强
  [02:41.02]小小的肩膀
  [02:44.24]能长出翅膀
  [02:47.29]逆风飞翔 */
  setlrcshow: function (lrc) {
    //定义空列表
    let lrcdata = []
    // 拆分成段落
    const lrclist = lrc.split("\n")
    //  分离出来时间和歌词【切片不好处理】
    // 定义正则  [00:36.840]  const re = /正则内容/
    const re = /\[\d{2}:\d{2}\.\d{2,3}\]/
    // 遍历列表
    lrclist.forEach(item => {
      // 剔除空项
      if (item) {
        // 获取时间：match()正则方法
        let itemdate = item.match(re)
        //  判断剔除掉【空时间】和整理时间
        if (itemdate) {
          // itemdate[0]是时间那项
          itemdate = itemdate[0]
          //整理时间-拆分出中括号：从第二位拿到倒数第二位
          itemdate = itemdate.slice(1, -1)
          //  00:20.090 转换成具有运算意义的 秒
          const timelist = itemdate.split(":")
          const time0 = timelist[0]  // 分钟
          const time1 = timelist[1]  // 秒
          // 整理拿到最终的时间值
          const time = parseFloat(time0) * 60 + parseFloat(time1)
          // 找歌词:replace()把符合时间的清除掉
          const lrcstr = item.replace(re, "")
          // 给歌词和时间进行匹配整合存储到列表当中
          lrcdata.push([time, lrcstr])
        }
      }
    })
    // 存储
    this.setData({
      lrcdata: lrcdata
    })
  },
  // 播放时间改变
  timechange: function (e) {
    // 当前时间
    var playtime = e.detail.currentTime
    // 总时间
    var sumtime = e.detail.duration
    // 歌词滚动
    this.lrcscroll(playtime)
    // 进度条时间改变
    this.timeplay(sumtime, playtime)
  },
  // 歌词显示和滚动
  lrcscroll: function (playtime) {
    // 拿到歌词数据
    const lrcdata = this.data.lrcdata
    for (let i = 0; i < lrcdata.length - 1; i++) {
      // 判断当前是否匹配到这个歌词（判断区间）
      if (lrcdata[i][0] < playtime && playtime < lrcdata[i + 1][0]) {
        // 设置歌词下标
        this.setData({
          lrcindex: i
        })
      }
    }
    // 歌词滚动：歌词行高是40
    this.setData({
      top: (this.data.lrcindex - 5) * 40
    })
  },
  // 进度条时间改变
  timeplay: function (sumtime, playtime) {
    // 处理总时长
    let m = sumtime / 60  // 计算分钟
    m = Math.floor(m)  // 取整
    let s = sumtime % 60  // 剩下的秒数
    s = Math.floor(s)   // 取整
    if (m < 10) m = "0" + m
    if (s < 10) s = "0" + s

    // 正在播放的时间处理
    let play_m = playtime / 60
    play_m = Math.floor(play_m)
    let play_s = playtime % 60
    play_s = Math.floor(play_s)
    if (play_m < 10) play_m = "0" + play_m
    if (play_s < 10) play_s = "0" + play_s

    // 设置
    this.setData({
      "sumtime": m + ":" + s,
      "playtime": play_m + ":" + play_s,
      "maxtime": sumtime,
      "valuetime": playtime
    })
  },
  // 拖动进度条
  sliderchange: function (e) {
    // e.detail.value存储当前长度
    let value = e.detail.value
    // 修改当前值
    this.setData({
      valuetime: value
    })
    //  对播放器的进度进行修改
    this.setData({
      action: {
        method: "setCurrentTime",
        data: value
      }
    })
    // 修改播放状态
    this.setData({
      action: {
        method: "play",
      }
    })
  },
  // 下一首
  nextSong: function () {
    const musiclist = this.data.musiclist
    let index = this.data.nowIndex
    //  拿到模式
    const modestate = this.data.modestate
    // 判断模式给出不同的修改id的方案
    switch (modestate) {
      case "loop":
        index++
        // console.log("顺序播发",index)
        break;
      case "single":
        index=this.data.nowIndex
        // console.log("单曲循环",index)
        break;
      case "random":
        index=Math.floor( Math.random()*musiclist.length)
        // console.log("随机下标",index)
        break;
    }
    // 到最后一首：跳回第一首
    if (index === musiclist.length) index = 0
    this.setData({
      musicid: musiclist[index].id,
      nowIndex: index
    })
    // 更新播放状态
    this.setData({
      action: {
        method: "play"
      }
    })
    //  再次获取歌词
    this.getlrc()
    // 再次获取歌曲详情
    this.getMusicDetail()
  },
  // 上一首
  prevSong: function () {
    const musiclist = this.data.musiclist
    let index = this.data.nowIndex
    //  拿到模式
    const modestate = this.data.modestate
    // 判断模式给出不同的修改id的方案
    switch (modestate) {
      case "loop":
        index--
        // console.log("顺序播发",index)
        break;
      case "single":
        index=this.data.nowIndex
        // console.log("单曲循环",index)
        break;
      case "random":
        index=Math.floor( Math.random()*musiclist.length)
        // console.log("随机下标",index)
        break;
    }
    if (index < 0) index = musiclist.length - 1
    this.setData({
      musicid: musiclist[index].id,
      nowIndex: index
    })
    this.setData({
      action: {
        method: "play"
      }
    })
    this.getlrc()
    this.getMusicDetail()
  },
  // 播放状态修改
  playmode: function () {
    // 状态列表
    const mode = this.data.mode
    //  状态下标
    let modeindex = this.data.modeindex
    modeindex++
    if (modeindex === mode.length) modeindex = 0
    //  设置当前状态
    this.setData({
      modestate: mode[modeindex],
      modeindex: modeindex
    })
    console.log(this.data.modestate)
  },
  // 播放结束
  musicEnd:function(){
    console.log("播放结束")
    // 播放结束：播放下一首歌
    this.nextSong()
  },
  // 播放列表
  playlist:function(){
    const listtop =this.data.listtop
    if (listtop===400) {
        this.setData({
          listtop:0
        })
    }else{
      this.setData({
        listtop:400
      })
    }
  },
  // 隐藏播放列表
  hiddenlist:function(){
    this.setData({
      listtop:0
    })
  },
  // 歌单列表切歌：和上下一首差不多
  musicChange:function(e){
    const index=e.currentTarget.dataset.index
    //  拿到下标后找歌曲
    const musiclist= this.data.musiclist
    const music= musiclist[index]
    //  设置歌曲id和当前歌曲下标
    this.setData({
      musicid:music.id,
      nowIndex:index
    })
    // 更新播放状态
    this.setData({
      action: {
        method: "play"
      }
    })
    // 调用获取歌词
    this.getlrc()
    //调用获取歌曲详情
    this.getMusicDetail()
  },
  // 删除列表当中的音乐
  deleteMusic:function(e){
    // 拿当前点击删除的下标
    const index=e.currentTarget.dataset.index
    // 拿到歌曲列表
    const musiclist=  this.data.musiclist
    //  拿到当前正在播放的歌曲下标
    let nowindex=this.data.nowIndex
    if (index===nowindex) {
        wx.showModal({
          title: '提示',
          content:"当前正在播放歌曲无法删除"
        })
        return
    } 
    // 下标优化
    if(index<nowindex) nowindex--
    // 删除歌曲
    musiclist.splice(index, 1);
    this.setData({
      musiclist:musiclist,
      nowIndex:nowindex
    })
  },
  // 播放mv
  playmv:function(){
    //  找到当前播放的音乐
    const music= this.data.music
    // 获取不同歌曲的mvid
    const mvid=music.mv

    // 判断是否有mv
    if(!mvid){
      wx.showModal({
        content: '这个歌曲没有mv',
        title: '提示',
      })
      return
    }
    // 把mvid传到MV详情播放页面
    wx.navigateTo({
      url: '/pages/mvplay/mvplay?mvid='+mvid,
    })
    // 停止当前歌曲播放
    this.setData({
      action: {
        "method": "pause"
      }
    })
  }
})